<template>
  <div class="step_05">
    连接桩：
    <el-button @click="demo1" size="mini" type="primary" plain>连接桩</el-button>
    <el-button @click="addEdge" size="mini" type="primary" plain>添加边 连接 桩</el-button>


    <div id="container"></div>
  </div>
</template>
<script>
import { Graph, Shape, Node, ObjectExt } from "@antv/x6";
export default {
  data() {
    return {
      graph: null,
      curCel: null,
      data: {
        nodes: [
          {
            id: "node1",
            x: 0,
            y: 50,
            width: 80,
            height: 40,
            attrs: {
              body: {
                fill: "blue",
              },
              label: {
                text: "Hello",
                fill: "white",
              },
            },
          },
        ]
      },
      defaultEdge: null,
    };
  },
  methods: {
    demo1() {
      this.graph.addNode({
        id: "node2",
        x: 300,
        y: 50,
        width: 80,
        height: 40,
        attrs: {
          body: {
            fill: "blue",
          },
          label: {
            text: "Hello",
            fill: "white",
          },
        },
        ports: {
          groups: {
            group1: {
              attrs: {
                circle: {
                  r: 6,
                  magnet: true,
                  stroke: '#31d0c6',
                  strokeWidth: 2,
                  fill: '#fff',
                },
              },
            },
          },
          items: [
            {
              id: 'port1',
              group: 'group1', // 指定分组名称
            },
            {
              id: 'port2',
              group: 'group1', // 指定分组名称
            },
            {
              id: 'port3',
              group: 'group1', // 指定分组名称
            },
          ],
        }
      })
    },
    addEdge() {
      this.graph.addEdge({
        source: "node1",
        target: {
          cell: "node2",
          port: "port1"
        }
      })
    }
  },
  mounted() {
    this.graph = new Graph({
      container: document.querySelector("#container"),
      width: 1300,
      height: 500,
      grid: true,
    });
    this.graph.fromJSON(this.data);
  },
};
</script>
<style scoped>
</style>